<template>
  <common-layout>
    <template #header>
      个人中心
    </template>

    <template #main>
      <div class="main-content">
        <el-card style="max-width: 100%">
          <template #header>
            <div class="card-header">
              <span>个人信息</span>
            </div>
          </template>

          <div class="user-info">
            <el-avatar
              v-if="user.avatar"
              :src="user.avatar"
              :size="100"
              style="vertical-align: middle; margin-right: 20px;"
            />
            <el-table :data="[user]" style="width: 100%; margin-top: 20px;" border>
              <el-table-column prop="userName" label="用户名"></el-table-column>
              <el-table-column prop="phone" label="手机号"></el-table-column>
              <el-table-column prop="email" label="邮箱"></el-table-column>
              <el-table-column prop="role" label="角色"></el-table-column>
            </el-table>
            <el-button type="primary" @click="openDialog" style="margin-left: 20px;">编辑</el-button>
          </div>

          <el-dialog title="编辑用户信息" v-model="dialogVisible" width="30%" center>
            <el-form :model="user" label-width="100px" ref="userForm">
              <el-form-item label="用户名">
                <el-input v-model="user.userName"></el-input>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="user.phone"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="user.email"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="submitUserInfo">确认提交</el-button>
            </span>
          </el-dialog>

          <template #footer>Footer content</template>
        </el-card>
      </div>
    </template>
  </common-layout>
</template>

<script>
import axios from '../../axios/axios';
import CommonLayout from '../Component/ManagePage.vue';

export default {
  components: {
    CommonLayout,
  },
  data() {
    return {
      dialogVisible: false,
      user: {
        userName: '',
        phone: '',
        email: '',
        role: '',
        avatar: null //  avatar 初始化为 null 
      }
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    submitUserInfo() {
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          // 添加 id 和 roleId
          const dataToSubmit = {
            id: this.user.id, // 确保 id 存在
            userName: this.user.userName,
            password: '', // 如果密码不需要更改，可以留空
            avatar: this.user.avatar ? [this.user.avatar] : [], // 头像转换为数组
            phone: this.user.phone,
            email: this.user.email,
            roleId: this.user.roleId // 确保 roleId 被正确传递
          };

          axios.post('/admin/user/myselfAdd', dataToSubmit)
            .then(response => {
              this.$message.success('用户信息提交成功');
              this.dialogVisible = false;
              this.fetchUserInfo(); // 提交成功后重新获取用户信息
            })
            .catch(error => {
              this.$message.error('提交失败: ' + error.message);
            });
        } else {
          this.$message.warning('请填写完整的用户信息');
          return false;
        }
      });
    },

    fetchUserInfo() {
      axios.get('/admin/user/myself')
        .then(data => {
          this.user = data || {};
          // 添加角色映射
          switch (this.user.roleId) {
            case 0:
              this.user.role = '超级管理员';
              break;
            case 1:
              this.user.role = '管理员';
              break;
            case 2:
              this.user.role = '创作者';
              break;
              case 3:
              this.user.role = '普通用户';
            default:
              this.user.role = '未知角色'; // 处理未知角色的情况
              break;
          }
          
          // 确保在用户对象中正确获取到 id 和 roleId
          this.user.id = this.user.id || 0; // 确保 id 的结构存在
          this.user.roleId = this.user.roleId || 0; // 确保 roleId 的结构存在
        })
        .catch(error => {
          console.error('获取用户信息失败:', error.message);
          this.user = {
            userName: '',
            phone: '',
            email: '',
            role: '未知角色',
            avatar: null,
            id: 0, // 确保 id 的结构存在
            roleId: 0 // 确保 roleId 的结构存在
          };
        });
    }


  },
  mounted() {
    this.fetchUserInfo(); // 组件加载时获取用户信息
  }
}
</script>

<style>
.main-content {
  padding: 10px;
  overflow-y: auto;
}

.user-info {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.el-table {
  margin-top: 20px;
}
</style>